<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css"  media="all">
  <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all" />
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
  <style>
    #admin dl{z-index:99999}
  </style>
</head>
<body>
<div style="margin-top: 20px;">
</div>
<form class="layui-form" id="admin">

  <div class="layui-form-item">
    <label class="layui-form-label">标题</label>
    <div class="layui-input-block" style="max-width:600px;">
      <input name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input" type="text" {notempty name="$article.title"}value="{$article.title}"{/notempty}>
    </div>
  </div>


  <div class="layui-form-item">
    <label class="layui-form-label">标签</label>
    <div class="layui-input-block" style="max-width:600px;">
      <input name="tag" autocomplete="off" placeholder="标签之间用,隔开" class="layui-input" type="text" {notempty name="$article.tag"}value="{$article.tag}"{/notempty}>
    </div>
  </div>

  <!--城市-->
  <div class="layui-form-item">
    <div class="layui-form-item">
      <label class="layui-form-label">城市</label>
      <div class="layui-input-inline" style="position: relative;z-index: 10000;width: 400px">
        <select id="trip_class" lay-filter="addtrips_class" lay-verify="required" lay-search>
          <option selected value="999999">全部</option>
          <option value="8888">美国</option>
          <option value="7777">加拿大</option>
          {volist name="city" id="vo"}
          <option value="{$vo.id}">{$vo.name}</option>
          {/volist}
        </select>
      </div>
      <span id="addtrips_class" data-name="全部" data-id="999999" class="layui-btn layui-btn-danger layui-btn-sm" style="margin-top: 4px">添加</span>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">已选城市</label>
      <div class="layui-input-inline" style="width: 500px" id="tripnames_class">
        {if !empty($city_name)}
        <?php if(!in_array($city_name,['999999','8888','7777'])){ foreach($city_name as $v){?>
        <span class="layui-btn layui-btn-sm layui-btn-normal deltripspan_class" data-id="{$v.id}" style="margin: 5px 10px">{$v.name}<i class="layui-icon"></i></span>
        <?php }}elseif($city_name=='999999'){ ?>
        <span class="layui-btn layui-btn-sm layui-btn-normal deltripspan_class" data-id="999999" style="margin: 5px 10px">全部<i class="layui-icon"></i></span>
        <?php }elseif($city_name=='8888'){ ?>
        <span class="layui-btn layui-btn-sm layui-btn-normal deltripspan_class" data-id="8888" style="margin: 5px 10px">美国<i class="layui-icon"></i></span>
        <?php }elseif($city_name=='7777'){ ?>
        <span class="layui-btn layui-btn-sm layui-btn-normal deltripspan_class" data-id="7777" style="margin: 5px 10px">加拿大<i class="layui-icon"></i></span>
        <?php } ?>
        {/if}
      </div>
    </div>

    <input name="city_id" id="tripids_class" value="<?php if(!empty($article['city_id'])){ echo $article['city_id']; }else{echo '';}?>" type="hidden">
  </div>

  <!--POI-->
  <div class="layui-form-item">
    <div class="layui-form-item">
      <label class="layui-form-label">关联POI</label>
      <div class="layui-input-inline" style="position: relative;z-index: 10000;width: 400px">
        <select id="select_poi" lay-filter="select_poi" lay-search>
          <option value="">请选择</option>
          {volist name="poilist" id="vo"}
            <option value="{$vo.id}">{$vo.name}</option>
          {/volist}
        </select>
      </div>
      <span id="add_poi" data-name="" data-id="" class="layui-btn layui-btn-danger layui-btn-sm" style="margin-top: 4px">添加</span>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">已选POI</label>
      <div class="layui-input-inline" style="width: 500px" id="selected_poi_name">
        {if !empty($pois)}
        {volist name='pois' id='v'}
        <span class="layui-btn layui-btn-sm layui-btn-normal del_selected_poi" data-id="{$v.id}" style="margin: 5px 10px">{$v.name}<i class="layui-icon"></i></span>
        {/volist}
        {/if}
      </div>
    </div>

    <input name="poi_ids" id="selected_poi_ids" value="<?php if(!empty($article['poi_ids'])){ echo $article['poi_ids']; }else{echo '';}?>" type="hidden">
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">描述</label>
    <div class="layui-input-block" style="max-width:600px;">
      <textarea placeholder="请输入内容" class="layui-textarea" name="description">{notempty name="$article.description"}{$article.description}{/notempty}</textarea>
    </div>
  </div>


  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">内容</label>
    <div class="layui-input-block" style="max-width:1000px;">
      <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="inc_tmplet">引入模板</button>
    </div>
    <div class="layui-input-block" style="max-width:1000px;">
      <textarea placeholder="请输入内容" class="layui-textarea" name="content" id="container" style="border:0;padding:0">{notempty name="$article.content"}{$article.content}{/notempty}</textarea>
    </div>
  </div>


  <div class="layui-form-item">
    <label class="layui-form-label">分类</label>
    <div class="layui-input-block" style="max-width:600px;">
      <select name="article_cate_id" lay-filter="aihao">
        <option value="">请选择分类</option>
        {volist name="$cates" id="vo"}
        <option value="{$vo.id}" {notempty name="$article.article_cate_id"}{eq name="$article.article_cate_id" value="$vo.id"} selected=""{/eq}{/notempty}>{$vo.str}{$vo.name}</option>
        {/volist}
      </select>
    </div>
  </div>
  <!--权重排序-->
  <div class="layui-form-item">
    <div class="layui-form-item">
      <label class="layui-form-label">权重</label>
      <div class="layui-input-inline" style="position: relative;z-index: 10000;width: 400px">
        <input type="text" value="{notempty name='$article.sort_num'}{$article.sort_num}{/notempty}" name="sort_num" class="layui-input">
      </div>
    </div>
  </div>

  <!--订单分类-->
  <div class="layui-form-item">
    <div class="layui-form-item">
      <label class="layui-form-label">订单分类</label>
      <div class="layui-input-inline" style="position: relative;z-index: 10000;width: 400px">
        <select id="type_class" lay-filter="addtypes_class" lay-verify="required" lay-search>
          <option selected value="999999">全部</option>
          {volist name="orderType" id="vo"}
          <option value="{$vo.id}">{$vo.name}</option>
          {/volist}
        </select>
      </div>
      <span id="addtypes_class" data-name="全部" data-id="999999" class="layui-btn layui-btn-danger layui-btn-sm" style="margin-top: 4px">添加</span>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">已选类型</label>
      <div class="layui-input-inline" style="width: 500px" id="typenames_class">
        <?php if(!empty($orderType_name) && $orderType_name!=='999999'){ foreach($orderType_name as $v){?>
        <span class="layui-btn layui-btn-sm layui-btn-normal deltypespan_class" data-id="{$v.id}" style="margin: 5px 10px">{$v.name}<i class="layui-icon"></i></span>
        <?php }}else{ ?>
        <span class="layui-btn layui-btn-sm layui-btn-normal deltypespan_class" data-id="999999" style="margin: 5px 10px">全部<i class="layui-icon"></i></span>
        <?php } ?>
      </div>
    </div>

    <input name="orderType" id="typeids_class" value="<?php if(!empty($article['orderType'])){ echo $article['orderType']; }else{echo 999999;}?>" type="hidden">
  </div>



  <div class="layui-upload" id="upload-video">
    <label class="layui-form-label">小视频</label>
    <button type="button" class="layui-btn" id="video">上传视频</button>
    <div class="layui-upload-list">
      <label class="layui-form-label"></label>
      <div id="video2" style="width:420px;height:280px;border: 1px solid #d7d7d7;    margin-left: 6.5%; ">
        {notempty name="$article.video"}
        <video id="demo2" controls="" width="420" height="280" {notempty name="$article.video"}src="{$article.video|geturl}"{/notempty} >
        <source {notempty name="$article.video"}src="{$article.video|geturl}"{/notempty} type="video/mp4"/>
        </video>

        <input type="hidden" name="video" value="{$article.video}">{/notempty}
      </div>
      <p id="demovideo"></p>
    </div>
  </div>
  {notempty name="$article"}
  <input type="hidden" name="id" value="{$article.id}">
  {/notempty}

  <div class="layui-upload" id="upload-thumb">
    <label class="layui-form-label">缩略图</label>
    <button type="button" class="layui-btn" id="thumb">上传图片</button>
    <div class="layui-upload-list">
      <label class="layui-form-label"></label>
      <img class="layui-upload-img" id="demo1" width="150" height="150" {notempty name="$article.thumb"}src="{$article.thumb|geturl}"{/notempty}>{notempty name="$article.thumb"}<input type="hidden" name="thumb" value="{$article.thumb}">{/notempty}
      <p id="demoText"></p>
    </div>
  </div>
  {notempty name="$article"}
  <input type="hidden" name="id" value="{$article.id}">
  {/notempty}
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="admin">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>

</form>


<script src="__PUBLIC__/layui/layui.js"></script>
<script src="__PUBLIC__/jquery/jquery.min.js"></script>
<script>
    layui.use('upload', function(){
        var upload = layui.upload;
        //执行实例

        upload.render({
            elem: '#video'
            ,url: "{:url('common/upload')}"
            ,accept: 'video'//普通文件
            ,size:'65536'
            ,done: function(res){
                layer.closeAll('loading');
                if(res.code == 2) {
                    $('#demo2').attr('src',res.src);
                    $('#upload-video').children('#videoid').remove();
                    $('#upload-video').append('<input id="videoid" type="hidden" name="video" value="'+ res.id +'">');
                    var st=' <video id="demo2" controls="" width="420" height="280" src="'+res.src+'" >' +
                        '        <source src="'+res.src+'" type="video/mp4"/>\n' +
                        '        </video>'

                    $('#video2').children().remove();
                    $('#video2').append(st)

                    layer.msg(res.msg);
                } else {
                    layer.msg(res.msg);
                }
            }
            ,error:function () {
              layer.closeAll('loading');
            }
            ,before:function () {
                layer.load(2);
            }
        });

        var uploadInst = upload.render({
            elem: '#thumb' //绑定元素
            ,url: "{:url('common/upload')}" //上传接口
            ,data:{use:'article_thumb'}
            ,accept: 'images'
            ,done: function(res){
                //上传完毕回调
                layer.closeAll('loading');
                if(res.code == 2) {
                    $('#demo1').attr('src',res.src);
                    $('#upload-thumb').append('<input type="hidden" name="thumb" value="'+ res.id +'">');
                } else {
                    layer.msg(res.msg);
                }
            }
            ,error: function(){
                //请求异常回调
                //演示失败状态，并实现重传
                layer.closeAll('loading');
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
            ,before:function () {
                layer.load(2);
            }
        });
    });
</script>
<script>
    layui.use(['layer', 'form'], function() {
        var layer = layui.layer,
            $ = layui.jquery,
            form = layui.form;
        $(window).on('load', function() {
            form.on('submit(admin)', function(data) {
                var city_id = $("#tripids_class").attr("value");
                if(city_id==''){
                    layer.msg("请选择城市");
                    return false;
                }
                $.ajax({
                    url:"{:url('admin/article/publish')}",
                    data:$('#admin').serialize(),
                    type:'post',
                    async: false,
                    success:function(res) {
                        if(res.code == 1) {
                            layer.msg(res.msg);
                            setTimeout(function(){
                                location.href = res.url;
                            },1000)
                        } else {
                            layer.msg(res.msg);
                        }
                    }
                })
                return false;
            });
        });

    });
</script>

<script type="text/javascript">
    layui.use(['layer','form'], function() {
        var layer = layui.layer,
            form = layui.form;

        $(window).on('load', function () {
            //城市选择
            form.on('select(addtrips_class)', function (data) {
                var tripid = data.value;
                $("#addtrips_class").attr("data-id", tripid);
            });
            $("#addtrips_class").on("click", function () {
                var tripid = $("#addtrips_class").attr("data-id");
                var tripids = $("#tripids_class").val();
                var ids = tripids.split(",");
                if (tripid == 999999) {
                    tripids = 999999;
                    var tripspan = '<span class="layui-btn layui-btn-sm layui-btn-normal deltripspan_class" data-id="999999" style="margin: 5px 10px">全部<i class="layui-icon"></i></span>';
                    $("#tripnames_class").html(tripspan);
                }else if(tripid == 8888) {
                    tripids = 8888;
                    var tripspan = '<span class="layui-btn layui-btn-sm layui-btn-normal deltripspan_class" data-id="999999" style="margin: 5px 10px">美国<i class="layui-icon"></i></span>';
                    $("#tripnames_class").html(tripspan);
                }else if(tripid == 7777) {
                    tripids = 7777;
                    var tripspan = '<span class="layui-btn layui-btn-sm layui-btn-normal deltripspan_class" data-id="999999" style="margin: 5px 10px">加拿大<i class="layui-icon"></i></span>';
                    $("#tripnames_class").html(tripspan);
                }else {
                    for (var i = 0; i < ids.length; i++) {
                        if (tripid == ids[i]) {
                            layer.msg("不能重复添加城市");
                            return false;
                        }
                        if (ids[i] == 999999) {
                            tripids = 999999;
                            var tripspan = '<span class="layui-btn layui-btn-sm layui-btn-normal deltripspan_class" data-id="999999" style="margin: 5px 10px">全部<i class="layui-icon"></i></span>';
                            $("#tripnames_class").html(tripspan);
                            $("#tripids_class").val(tripids);
                            return false;
                        }else if(ids[i] == 8888){
                            tripids = 8888;
                            var tripspan = '<span class="layui-btn layui-btn-sm layui-btn-normal deltripspan_class" data-id="8888" style="margin: 5px 10px">美国<i class="layui-icon"></i></span>';
                            $("#tripnames_class").html(tripspan);
                            $("#tripids_class").val(tripids);
                            return false;
                        }else if(ids[i] == 7777){
                            tripids = 7777;
                            var tripspan = '<span class="layui-btn layui-btn-sm layui-btn-normal deltripspan_class" data-id="7777" style="margin: 5px 10px">加拿大<i class="layui-icon"></i></span>';
                            $("#tripnames_class").html(tripspan);
                            $("#tripids_class").val(tripids);
                            return false;
                        }
                    }
                    var tripname = "";
                    $("#trip_class").find("option").each(function () {
                        if ($(this).val() == tripid) {
                            tripname = $(this).html();
                        }
                    });

                    var tripspan = '<span class="layui-btn layui-btn-sm layui-btn-normal deltripspan_class" data-id="' + tripid + '" style="margin: 5px 10px">' + tripname + '<i class="layui-icon"></i></span>';
                    if (!tripids) {
                        tripids += tripid;
                    } else {
                        tripids += ',' + tripid;
                    }
                    $("#tripnames_class").append(tripspan);
                }
                $("#tripids_class").val(tripids);
            });
            $(document).on("click", '.deltripspan_class', function () {
                var dataid = $(this).attr("data-id");
                var tripids = $("#tripids_class").val();
                var ids = tripids.split(",");
                var newid = "";
                for (var i = 0; i < ids.length; i++) {
                    if (ids[i] && dataid != ids[i]) {
                        if (!newid) {
                            newid += ids[i];
                        } else {
                            newid += "," + ids[i];
                        }
                    }
                }
                $("#tripids_class").val(newid);
                $(this).remove();
            });
            //POI选择
            form.on('select(select_poi)', function (data) {
                var poiid = data.value;
                console.log(data)
                $("#add_poi").attr("data-id", poiid);
                $("#add_poi").attr("data-name", $(this).text());
            });
            $("#add_poi").on("click", function () {
                var poiid = $(this).attr("data-id");
                if(poiid==""){
                    layer.msg('请选择POI');
                    return false;
                }
                var poi_ids = $("#selected_poi_ids").val();
                console.log(poi_ids);
                var select_poi_ids = [];
                if (poi_ids!='' && poi_ids!=undefined){
                    select_poi_ids = poi_ids.split(",");
                    if ($.inArray(poiid,select_poi_ids)>-1) {
                        layer.msg("不能重复添加POI");
                        return false;
                    }
                }
                select_poi_ids.push(poiid);
                poi_ids = select_poi_ids.join();
                var poiname = $(this).attr('data-name');
                var poispan = '<span class="layui-btn layui-btn-sm layui-btn-normal del_selected_poi" data-id="' + poiid + '" style="margin: 5px 10px">' + poiname + '<i class="layui-icon"></i></span>';
                $("#selected_poi_name").append(poispan);
                $("#selected_poi_ids").val(poi_ids);
            });
            $(document).on("click", '.del_selected_poi', function () {
                var dataid = $(this).attr("data-id");
                var tripids = $("#selected_poi_ids").val();
                var ids = tripids.split(",");
                var newid = "";
                for (var i = 0; i < ids.length; i++) {
                    if (ids[i] && dataid != ids[i]) {
                        if (!newid) {
                            newid += ids[i];
                        } else {
                            newid += "," + ids[i];
                        }
                    }
                }
                $("#selected_poi_ids").val(newid);
                $(this).remove();
            });
            //类型选择
            form.on('select(addtypes_class)', function (data) {
                var typeid = data.value;
                $("#addtypes_class").attr("data-id", typeid);
            });
            $("#addtypes_class").on("click", function () {
                var typeid = $("#addtypes_class").attr("data-id");
                var typeids = $("#typeids_class").val();
                var ids = typeids.split(",");

                if (typeid == 999999) {
                    typeids = 999999;
                    var typespan = '<span class="layui-btn layui-btn-sm layui-btn-normal deltypespan_class" data-id="999999" style="margin: 5px 10px">全部<i class="layui-icon"></i></span>';
                    $("#typenames_class").html(typespan);
                } else {
                    for (var i = 0; i < ids.length; i++) {
                        if (typeid == ids[i]) {
                            layer.msg("不能重复添加城市");
                            return false;
                        }
                        if (ids[i] == 999999) {
                            typeids = 999999;
                            var typespan = '<span class="layui-btn layui-btn-sm layui-btn-normal deltypespan_class" data-id="999999" style="margin: 5px 10px">全部<i class="layui-icon"></i></span>';
                            $("#typenames_class").html(typespan);
                            $("#typeids_class").val(typeids);
                            return false;
                        }
                    }
                    var typename = "";
                    $("#type_class").find("option").each(function () {
                        if ($(this).val() == typeid) {
                            typename = $(this).html();
                        }
                    });

                    var typespan = '<span class="layui-btn layui-btn-sm layui-btn-normal deltypespan_class" data-id="' + typeid + '" style="margin: 5px 10px">' + typename + '<i class="layui-icon"></i></span>';
                    if (!typeids) {
                        typeids += typeid;
                    } else {
                        typeids += ',' + typeid;
                    }
                    $("#typenames_class").append(typespan);
                }
                $("#typeids_class").val(typeids);
            });
            $(document).on("click", '.deltypespan_class', function () {
                var dataid = $(this).attr("data-id");
                var typeids = $("#typeids_class").val();
                var ids = typeids.split(",");
                var newid = "";
                for (var i = 0; i < ids.length; i++) {
                    if (ids[i] && dataid != ids[i]) {
                        if (!newid) {
                            newid += ids[i];
                        } else {
                            newid += "," + ids[i];
                        }
                    }
                }
                $("#typeids_class").val(newid);
                $(this).remove();
            });


        });

        //使用模板
        $("#inc_tmplet").click(function () {
            $.ajax({
                url: "{:url('admin/article/inc_tmplet')}",
                async: false,
                success: function (res) {
                    console.log(res);
                    if (res.code == 1) {
                        var ue = UE.getEditor('container');
                        ue.ready(function () {
                            ue.setContent(res.data);
                        });
                    }
                }
            })
            return false;
        });

    });
</script>
<!-- 配置文件 -->
<script type="text/javascript" src="__PUBLIC__/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="__PUBLIC__/ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
    var ue = UE.getEditor('container');
</script>
</body>
</html>
